<template>
  <div class="w-full h-full">
    <!-- <LineChart />
    <cloud-charts class="mt-6" :height="'300px'" :options="options2.value" /> -->
    <!-- <img :src="overviewImg" class="w-full h-full" alt="overview" /> -->
    <div class="overview-bg">
      <div class="overview-line">
        <div class="overview-line-top">
          <div class="overview-line-top-left">
            <div class="overview-title">概览</div>
            <div class="overview-detail">
              <div
                class="overview-detail-card detail-bg-blue"
                @click="goToPage('NodeList')">
                <div class="overview-detail-item">
                  <div>
                    <div class="overview-detail-title">节点数(个)</div>
                    <div class="overview-detail-number">
                      {{ moneyOverviewData?.node?.total }}
                    </div>
                  </div>
                  <div class="overview-detail-icon">
                    <i-icons-nodes></i-icons-nodes>
                  </div>
                </div>
                <a-divider :size="1" type="dashed" margin="0" />
                <div class="overview-detail-numbers">
                  <div class="overview-detail-number">
                    <div class="overview-detail-key">运行</div>
                    <div class="overview-detail-value">
                      {{ moneyOverviewData?.node?.running }}
                    </div>
                  </div>
                  <div class="overview-detail-number">
                    <div class="overview-detail-key">离线</div>
                    <div class="overview-detail-value">
                      {{ moneyOverviewData?.node?.offline }}
                    </div>
                  </div>
                  <div class="overview-detail-number">
                    <div class="overview-detail-key">停止</div>
                    <div class="overview-detail-value">
                      {{ moneyOverviewData?.node?.stopped }}
                    </div>
                  </div>
                  <div class="overview-detail-number">
                    <div class="overview-detail-key">异常</div>
                    <div
                      class="overview-detail-value"
                      :class="
                        moneyOverviewData?.node?.abnormal
                          ? 'text-[#F53F3F]'
                          : ''
                      ">
                      {{ moneyOverviewData?.node?.abnormal }}
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="overview-detail-card detail-bg-green"
                @click="goToPage('SiteList')">
                <div class="overview-detail-item">
                  <div>
                    <div class="overview-detail-title">站点数(个)</div>
                    <div class="overview-detail-number">
                      {{ moneyOverviewData?.site?.total }}
                    </div>
                  </div>
                  <div class="overview-detail-icon">
                    <i-icons-sites></i-icons-sites>
                  </div>
                </div>
                <a-divider :size="1" type="dashed" margin="0" />
                <div class="overview-detail-numbers">
                  <div class="overview-detail-number">
                    <div class="overview-detail-key">已接入</div>
                    <div class="overview-detail-value">
                      {{ moneyOverviewData?.site?.resolved }}
                    </div>
                  </div>
                  <div class="overview-detail-number">
                    <div class="overview-detail-key">未接入</div>
                    <div
                      class="overview-detail-value"
                      :class="
                        moneyOverviewData?.site?.unresolved
                          ? 'text-[#FF7D00]'
                          : ''
                      ">
                      {{ moneyOverviewData?.site?.unresolved }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="overview-line-top-right">
            <div class="overview-face">
              <div class="overview-face-title">
                <div class="overview-face-icon">
                  <a-avatar :size="48" shape="circle">
                    <img src="@/assets/images/face.png" alt="avatar" />
                  </a-avatar>
                </div>
                <div class="overview-face-text">
                  您好，{{ appStore.userInfo?.username }}
                </div>
              </div>
            </div>
            <div class="overview-face-details">
              <div class="overview-face-item">
                <div class="overview-face-key">最近登录 IP</div>
                <div class="overview-face-value">
                  {{ appStore.userInfo?.login_ip }}
                </div>
              </div>
              <div class="overview-face-item">
                <div class="overview-face-key">所在地</div>
                <div class="overview-face-value">
                  {{ appStore.userInfo?.login_location }}
                </div>
              </div>
              <div class="overview-face-item">
                <div class="overview-face-key">登录时间</div>
                <div class="overview-face-value">
                  {{ formatUnix(appStore.userInfo?.login_at) }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="overview-line-bottom">
          <div class="overview-line-title">今日数据</div>
          <div class="overview-chart__header">
            <a-radio-group
              v-model="chartType"
              style="position: relative; top: 30px; z-index: 10"
              type="button">
              <a-radio
                v-for="{ key, label } in typeList"
                :key="key"
                :value="key"
                :name="key"
                >{{ label }}</a-radio
              >
            </a-radio-group>
          </div>
          <LineChart
            :type="chartType"
            :time-date="timeDate"
            :math-random="MathRandom" />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
// import { usePieCharts } from '@/components/cloud-charts'
// import { formatFloat, formatThousand } from '@/utils'
import { getApiSummaryApi } from '@/apis/modules/resolve/statistics'
import { useAppStore } from '@/stores/app'
import dayjs from 'dayjs'
import LineChart from './LineChart.vue'
const router = useRouter()
// @ts-ignore
// import overviewImg from '@/assets/images/overview.png'
const loading = ref(false)
const appStore = useAppStore()
const MathRandom = ref(0)
// 饼图
const moneyOverviewData = ref<any>({})
const chartType = ref('traffic')
const typeList: { label: string; key: string }[] = [
  { label: '流量', key: 'traffic' },
  { label: '带宽', key: 'bandwidth' },
  { label: '请求数', key: 'request' },
  { label: '命中率', key: 'hitRate' }
]
/** 获取概览 */
const getOverview = () => {
  loading.value = true
  getApiSummaryApi({})
    .then((res) => {
      moneyOverviewData.value = res
      loading.value = false
    })
    .catch(() => {
      loading.value = false
    })
}

const goToPage = (path: string) => {
  router.push({
    name: path
  })
}

const timeDate = ref(dayjs().format('YYYY-MM-DD'))

onMounted(() => {
  getOverview()
})
</script>

<style scoped lang="less">
.overview-bg {
  width: calc(100vw - 206px);
  height: 300px;
  position: absolute;
  object-fit: cover;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, #f2f3f5 50%),
    url('@/assets/images/overview.png') lightgray -633.531px -1010.063px /
      151.667% 544% no-repeat;
  background: url('@/assets/images/overview.png');
  background-size: 100%;
  margin: -24px;
  z-index: 0;
  background-repeat: no-repeat;
}
.overview-line {
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 0;
  padding: 24px;
  max-height: calc(100vh - 00px);
  overflow-y: auto;
  overflow-x: hidden;
  .overview-line-top {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;

    .overview-line-top-left {
      display: flex;
      padding: 24px;
      flex-direction: column;
      align-items: flex-start;
      gap: 24px;
      flex: 1 0 0;
      align-self: stretch;
      border-radius: 6px;
      border: 1px solid #fff;
      background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.5) 0%,
        #fff 50%
      );
      box-shadow:
        0px 2px 4px 0px rgba(29, 33, 41, 0.04),
        0px 4px 5px 0px rgba(29, 33, 41, 0.08);
      backdrop-filter: blur(5px);
      .overview-title {
        color: var(---color-text-1, #1d2129);
        font-size: 14px;
        font-weight: 700;
        line-height: 22px; /* 157.143% */
      }
      .overview-detail {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        flex: 1 0 0;
        align-self: stretch;
        .overview-detail-card {
          display: flex;
          padding: 16px 24px;
          flex-direction: column;
          align-items: flex-start;
          gap: 16px;
          flex: 1 0 0;
          align-self: stretch;
          border-radius: 4px;
          cursor: pointer;
          .overview-detail-item {
            display: flex;
            height: 59px;
            justify-content: space-between;
            align-items: center;
            align-self: stretch;
          }
          .overview-detail-title {
            color: var(---color-text-2, #393c40);
            font-size: 14px;
            font-weight: 400;
            line-height: 22px; /* 157.143% */
          }
          .overview-detail-number {
            color: var(---color-text-2, #393c40);
            font-family: BebasNeue, sans-serif;
            font-size: 28px;
            font-weight: 400;
            line-height: normal;
            margin-top: 8px;
          }
          .overview-detail-numbers {
            display: flex;
            justify-content: space-between;
            align-items: center;
            align-self: stretch;
            .overview-detail-number {
              display: flex;
              align-items: center;
              gap: 4px;
              color: var(---color-text-3, #646a73);
              .overview-detail-key {
                font-size: 14px;
                line-height: 22px; /* 157.143% */
              }
              .overview-detail-value {
                font-family: 'BebasNeue';
                font-size: 16px;
                line-height: 22px; /* 157.143% */
              }
            }
          }
        }
        .detail-bg-blue {
          border: 1px solid var(---color-border-1, #f3f4f7);
          background: linear-gradient(
            180deg,
            rgba(13, 174, 255, 0.1) 0%,
            rgba(13, 174, 255, 0) 100%;
          );
          &:hover {
            border: 1px solid var(---color-border-white, #fff);
            box-shadow: 0px 4px 24px 0px rgba(209, 222, 229, 0.3);
          }
        }
        .detail-bg-green {
          border: 1px solid var(---color-border-1, #f3f4f7);
          background: linear-gradient(
            180deg,
            rgba(83, 220, 229, 0.1) 0%,
            rgba(83, 220, 229, 0) 100%
          );
          &:hover {
            border: 1px solid var(---color-border-white, #fff);
            box-shadow: 0px 4px 24px 0px rgba(209, 229, 227, 0.3);
          }
        }
      }
    }
    .overview-line-top-right {
      display: flex;
      width: 30%;
      height: 252px;
      padding: 24px;
      flex-direction: column;
      align-items: center;
      gap: 24px;
      border-radius: 6px;
      border: 1px solid #fff;
      background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.5) 0%,
        #fff 50%
      );
      box-shadow:
        0px 2px 4px 0px rgba(29, 33, 41, 0.04),
        0px 4px 5px 0px rgba(29, 33, 41, 0.08);
      backdrop-filter: blur(5px);
      .overview-face-title {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
      }
      .overview-face-text {
        color: var(---color-text-1, #1d2129);
        font-family: 'Microsoft YaHei UI';
        font-size: 14px;
        font-weight: 700;
        line-height: 22px; /* 157.143% */
      }
      .overview-face-details {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        align-self: stretch;
      }
      .overview-face-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;
        color: var(---color-text-3, #646a73);
        font-size: 12px;
        line-height: 20px; /* 166.667% */
      }
    }
  }
  .overview-line-bottom {
    display: flex;
    height: 500px;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    //gap: 24px;
    align-self: stretch;
    border-radius: 6px;
    border: 1px solid #fff;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, #fff 30%);
    box-shadow:
      0px 2px 4px 0px rgba(29, 33, 41, 0.04),
      0px 4px 5px 0px rgba(29, 33, 41, 0.08);
    backdrop-filter: blur(5px);
    margin-top: 24px;
    .overview-line-title {
      color: var(---color-text-1, #1d2129);
      font-size: 14px;
      font-weight: 700;
      line-height: 22px; /* 157.143% */
      margin-bottom: -10px;
    }
  }
}
</style>
